<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <i class="font_family icon-hetongmobanguanli"></i>
        <span>我的任务</span>
      </div>
    </template>
    <t-table
      :table="table"
      :columns="table.columns"
      @size-change="sizeChange"
      @page-change="pageChange"
    >
      <template #toolbar>
        <div class="query-condition">
          <el-button
            :key="date.text"
            v-for="date in rangeShortcuts"
            size="small"
            link
            @click="() => (queryState.date = date.value)"
            >{{ date.text }}</el-button
          >

          <el-date-picker
            size="small"
            style="width: 200px; margin-bottom: 6px; margin-right: 8px"
            v-model="queryState.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-input
            @input="changeKeyword"
            style="width: 200px"
            v-model="debounceKeyword"
            size="small"
            placeholder="请输入"
            :suffix-icon="Search"
          />
          <el-radio-group size="small" v-model="queryState.type">
            <el-radio-button label="工作流相关" value="工作流相关" />
            <el-radio-button label="其他相关" value="其他相关" />
          </el-radio-group>
        </div>
      </template>
    </t-table>
  </el-card>
</template>

<script setup lang="tsx">
import TTable from '@/components/table/index.vue'
import { reactive, ref, watch } from 'vue'
import { Filter, Search } from '@element-plus/icons-vue'
import moment from 'moment'
import { debounce } from 'lodash'

const rangeShortcuts = ref([
  {
    text: '今日',
    value: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
  },
  {
    text: '本周',
    value: [
      moment().week(moment().week()).startOf('week').format('YYYY-MM-DD'),
      moment().week(moment().week()).endOf('week').format('YYYY-MM-DD'),
    ],
  },
  {
    text: '本月',
    value: [
      moment().month(moment().month()).startOf('month').format('YYYY-MM-DD'),
      moment().month(moment().month()).endOf('month').format('YYYY-MM-DD'),
    ],
  },
])

const queryState = reactive({
  date: [] as any,
  keyword: '',
  type: '工作流相关',
})

const debounceKeyword = ref('')

let table = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  // 接口返回数据
  data: [
    {
      id: '1',
      data: '测试说明',
      data1: '测试',
      data2: '1',
      data3: 'admin',
      data4: '台柜风空港',
      data5: '2024-05-06',
      data6: '办理 委托 图形监控',
      data7: '正运行',
    },
    {
      id: '2',
      data: '测试说明',
      data1: '测试',
      data2: '2',
      data3: 'admin',
      data4: '台柜风空港',
      data5: '2024-05-06',
      data6: '办理 委托 图形监控',
      data7: '正运行',
    },
    {
      id: '3',
      data: '测试说明',
      data1: '测试',
      data2: '3',
      data3: 'admin',
      data4: '台柜风空港',
      data5: '2024-05-06',
      data6: '办理 委托 图形监控',
      data7: '正运行',
    },
    {
      id: '4',
      data: '测试说明',
      data1: '测试',
      data2: '1',
      data3: 'admin',
      data4: '台柜风空港',
      data5: '2024-05-06',
      data6: '办理 委托 图形监控',
      data7: '正运行',
    },
    {
      id: '5',
      data: '测试说明',
      data1: '测试',
      data2: '1',
      data3: 'admin',
      data4: '台柜风空港',
      data5: '2024-05-06',
      data6: '办理 委托 图形监控',
      data7: '正运行',
    },
  ],
  // 表头数据
  columns: [
    {
      prop: 'data',
      label: '业务说明',
      minWidth: '100',
      renderHeader: (column: any) => {
        const { label } = column
        return  <span>{label}</span>
      },
    },
    { prop: 'data1', label: '流程名', minWidth: '180' },
    {
      prop: 'data2',
      // label: '字典过滤',
      minWidth: '80',
      renderHeader: () => {
        return <span style='color:red'>节点名</span>
      },
      filters: { list: 'statusList', key: 'id', label: 'label' },
    },
    { prop: 'data3', label: '发起人', minWidth: '220' },
    { prop: 'data4', label: '发起部门', minWidth: '220' },
    { prop: 'data5', label: '到达时间', minWidth: '220' },
    { prop: 'data6', label: '任务链接', minWidth: '220' },
    { prop: 'data7', label: '任务状态', minWidth: '220' },
  ],
  // 字典渲染数据源
  listTypeInfo: {
    statusList: [
      {
        id: '1',
        label: '待办',
      },
      {
        id: '2',
        label: '待审批',
      },
      {
        id: '3',
        label: '报废',
      },
    ],
  },
})

// 选择当前页码
const pageChange = (val) => {
  table.value.currentPage = val
  console.log('选择当前页码', val)
}

const sizeChange = (val) => {
  table.value.currentPage = 1
  table.value.pageSize = val
  console.log('选择当前pageSize', val)
}

const changeKeyword = debounce(() => {
  queryState.keyword = debounceKeyword.value
}, 500)

const getData = async (param) => {
  await setTimeout(() => {
    console.log('获取接口数据成功', param)
  })
}

watch(
  () => queryState,
  (val) => {
    getData(val)
  },
  { deep: true }
)
</script>

<style lang="less">
.el-card {
  border: none;
  background-color: rgba(255, 255, 255, 0.4);
  .card-header {
    i {
      color: var(--el-color-primary);
      margin-right: 10px;
    }
  }
  .t-table,
  /deep/.el-pagination {
    background-color: rgba(255, 255, 255, 0);
  }
  /deep/.el-table th.el-table__cell {
    background-color: #f8f8f8;
  }
}
.query-condition {
  display: flex;
  flex-wrap: wrap;
}
.query-condition > * {
  margin-bottom: 6px;
  margin-right: 8px;
  margin-left: 0px !important;
}
</style>
